<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style type="text/css">
	*{margin:0px;padding:0px;list-style:none;}
	#uls{width:500px;height:400px;position:relative;left:20px;top:20px;}
	#uls li{width:500px;height:400px;border:solid 1px orange;position:absolute;}
	</style>
</head>
<body>
	<ul id='uls'>
		<li><img src="./lunbo/30.jpg" alt="" width='100%'></li>
		<li><img src="./lunbo/31.jpg" alt="" width='100%'></li>
		<li><img src="./lunbo/32.jpg" alt="" width='100%'></li>
		<li><img src="./lunbo/33.jpg" alt="" width='100%'></li>
		<li><img src="./lunbo/34.jpg" alt="" width='100%'></li>
	</ul>

	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">
	
	var index = 1;

	//定时器
	setInterval(function(){
		//获取下标做++操作
		move(index++);

		if(index > 4)
		{
			index = 0;
		}

	},1000)

	function move(i)
	{
		$('#uls li').eq(i).show();
		$('#uls li').eq(i).siblings().hide();
	}

	move(0);

	


	</script>
</body>
</html>